<template>
	<view class="content">
		<view style="margin: 0 auto" v-if="emailInfo.email">
			<text style="font-weight: bold">我的邮箱({{ emailInfo.email }})</text>
		</view>
		<view class="content_box" v-for="(item, index) in tabs" :key="index" @click="handleClickItem(item)">
			<view class="content_box_img">
				<image :src="item.icon" alt="" style="width: 60rpx;height: 60rpx;" />
			</view>
			<view class="content_box_label">
				{{ item.label }}
			</view>
		</view>
		<view style="margin-top: 20rpx;" v-if="listEmail && listEmail.length > 1">
			<view style="display: flex;gap:20rpx;font-size: 28rpx;justify-content: center;flex-direction: column;">
				<button size="medium" type="default" color="#0097ff" @click="handleChangeEmail()">切换邮箱</button>
			</view>
		</view>
		<!-- 邮箱列表 -->
		<TkiTree idKey="id" rangeKey="email" :range="listEmail" ref="listEmailRef" @confirm="confirmSelect"
			:multiple="false" />
	</view>
</template>

<script>
import TkiTree from '@/components/tki-tree/tki-tree.vue'
import {
	postFormAction
} from '@/utils/request.js';
import in_box from '../static/externalEmail/in_box.png';
import write from '../static/externalEmail/write.png';
import garbage_bin from '../static/externalEmail/garbage_bin.png';
import has_send from '../static/externalEmail/has_send.png';
import draft from '../static/externalEmail/draft.png';
import store from '@/store' // 引入vuex
export default {
	components: { TkiTree },
	data() {
		return {
			tabs: [{
				label: '写信',
				value: '1',
				icon: write,
			},
			{
				label: '收件箱',
				value: '2',
				icon: in_box,
			},
			{
				label: '草稿箱',
				value: '3',
				icon: draft,
			},
			{
				label: '发件箱',
				value: '4',
				icon: has_send,
			},
			{
				label: '垃圾箱',
				value: '5',
				icon: garbage_bin,
			},
			],
			isDoRefresh: false,
			urls: {
				getDefaultEmailId: '/email/getDefaultEmailId',
				listEmail: '/email/listEmail'
			},
			emailInfo: {}, //当前email
			listEmail: [], //邮箱列表
		}
	},
	onLoad() {
		this.handleInit()
	},
	//刷页面
	onShow(e) {
		const that = this;
		let pages = getCurrentPages();
		//刷新页面
		let currPage = pages[pages.length - 1];
		if (currPage.isDoRefresh == true) {
			currPage.isDoRefresh = false;
			that.handleInit()
		}
	},
	// computed: {
	// 	...mapState(["userInfo"]),
	// 	deptCode() {
	// 		console.log('userInfo', this.userInfo)
	// 		return this.userInfo.deptCode
	// 	},
	// },
	methods: {
		handleInit() {
			this.getDefaultEmailIdData()
		},
		handleClickItem(item) {
			if (!this.emailInfo.id) {
				uni.showToast({
					icon: "none",
					title: "暂无邮箱，请先设置默认邮箱"
				})
				return
			}
			switch (item.value) {
				case '1':
					uni.navigateTo({
						url: `/cmn/externalEmail/writebox/index`,
					});
					break
				case '2':
					uni.navigateTo({
						url: `/cmn/externalEmail/inbox/index`,
					});
					break
				case '3':
					uni.navigateTo({
						url: `/cmn/externalEmail/draftbox/index`,
					});
					break
				case '4':
					uni.navigateTo({
						url: `/cmn/externalEmail/outbox/index`,
					});
					break
				case '5':
					uni.navigateTo({
						url: `/cmn/externalEmail/garbageBinbox/index`,
					});
					break
			}
		},
		//获取当前邮箱信息
		async getDefaultEmailIdData() {
			try {
				uni.showLoading({
					icon: 'none',
					title: '加载中...'
				})
				const res = await postFormAction(this.urls.getDefaultEmailId)
				this.emailInfo = res.data || {}
				this.setEmailInfo()
				uni.hideLoading()
			} catch (e) {
				uni.hideLoading()
			}
		},
		//获取邮箱列表
		async getListEmailData() {
			try {
				uni.showLoading({
					icon: 'none',
					title: '加载中...'
				})
				const res = await postFormAction(this.urls.listEmail, {
					emailId: this.emailInfo.id
				})
				this.listEmail = res.data || []
				uni.hideLoading()
			} catch (e) {
				uni.hideLoading()
			}
		},
		confirmSelect(e) {
			if (e && e.length) {
				this.emailInfo = e[0]
				this.setEmailInfo()
			}
		},
		//取消
		cancelSelect() { },

		//切换邮箱
		handleChangeEmail() {
			this.$refs.listEmailRef._show()
		},
		//设置缓存
		setEmailInfo() {
			store.commit('SET_EMAIL_INFO', this.emailInfo);
		},

	}
}
</script>

<style lang="scss" scoped>
.content {
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	gap: 20rpx;

	&_box {
		display: flex;
		align-items: center;
		gap: 10px;

		&_img {}

		&_label {
			flex: 1;
			padding: 10px;
			border-bottom: 1px solid rgba(0, 0, 0, .1);
		}
	}
}

::v-deep .u-size-medium {
	padding: 0 40rpx !important;
}
</style>